<script lang="ts" setup>
  import DetailName from './Sub/Name.vue';
  import DetailStars from './Sub/Stars.vue';
  import DetailAddress from './Sub/Address.vue';
  import DetailPrice from './Sub/Price.vue';
  import DetailOpenDateTime from './Sub/OpenDateTime.vue';
  import DetailRecom from './Sub/Recom.vue';
  import DetailCommonKeyword from './Sub/CommentKeyword.vue';

  interface IProps {
    name: string;
    star: number;
    score: string;
    address: string;
    price: number;
    createTime: string | Date | number;
    description: string;
    recom: string;
    keywords: string;
  }

  defineOptions({
    name: 'FoodDetail'
  });

  const props = withDefaults(defineProps<Partial<IProps>>(), {
    name: '',
    star: 0,
    score: '',
    address: '',
    price: 0,
    createTime: '',
    description: '',
    recom: '',
    keywords: '',
  });
</script>

<template>
  <div class="food-detail">
    <detail-name :name="props.name" />
    <detail-stars :star-num="props.star" :score="props.score" />
    <detail-address :address="props.address" />
    <detail-price :price="props.price" />
    <detail-open-date-time :open-date-time="props.createTime" />
    <detail-recom :recom="props.recom" />
    <detail-common-keyword :comment-keyword="props.keywords.split(',')" />
  </div>
</template>
